<template>
  <div class="header">
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      class="search"
      @search="onSearch"
      @update:model-value="changeValue"
    >
    </van-search>
    <div @click="onCancel" class="cancel">取消</div>
  </div>

  <div class="result">
    <result-content v-if="!isList"></result-content>
    <van-list
      v-else
      v-model:loading="loading"
      :finished="finished"
      @load="onLoad"
    >
      <van-cell @click="checked(item)" v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import useSearchStore from "@/stores/modules/search";
import ResultContent from "./cpns/result-content.vue";
const router = useRouter();
const onCancel = () => {
  router.go(-1);
};

const value = ref("");
const onSearch = (val) => {
  console.log(val);
};
const changeValue = () => {
  if (value.value.length > 0) {
    isList.value = true;
    onLoad();
  } else {
    isList.value = false;
  }
};

const searchStore = useSearchStore();
searchStore.fetchSearch();

const isList = ref(false);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    let arr = [];
    for (let i = 1; i <= 10; i++) {
      arr.push(value.value + i);
    }
    list.value = arr;
    // 加载状态结束
    loading.value = false;

    finished.value = true;
  }, 800);
};
const checked=(item)=>{
    value.value = item
    isList.value = false
}
</script>
<style lang="less" scoped>
.header {
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search{
    flex: 1;
  }
  .cancel{
    padding-right: 8px;
  }
}
.result {
  height: calc(100vh - 54px);
  overflow-y: auto;
}
</style>
